<template>
	<view class="withdrawal">
		<!-- 顶部导航 -->
		<diyNavBar value='提现' color='#FF6F30'></diyNavBar>
		<!-- 顶部内容 -->
		<view class="topmony">
			<view class="title">可提现金额（元）</view>
			<view class="money"><text>￥</text>{{money}}</view>
		</view>
		<view class="bottommoney">
			<view class="title">提现金额</view>
			<view class="center">
				<text class="left">￥</text>
				<input type="number" v-model="price" placeholder-style="color:rgba(0,0,0,.1)" placeholder="请输入金额"/>
				<text class="whole" @click="price = money">全部提现</text>
			</view>
			<view class="bottom">
				<text class="left">支付方式</text>
				<view class="right" v-if="paymenttype[paymentindex]">
					<text class="iconfont" :class="paymenttype[paymentindex].icon"></text>
					<text class="text" @click="$refs.popup.open()">{{paymenttype[paymentindex].name}}</text>
					<text class="iconfont icon-jinrujiantou"></text>
				</view>
			</view>
			<button type="default" class="button" @click="btn">申请提现</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="payment-box">
				<view class="item" v-for="(item,index) in paymenttype" :key="index" @click="paymentindex = index">
					<view class="item-left">
						<text class="iconfont" :class="item.icon"></text>
						{{item.name}}
					</view>
					<view class="right" v-if="paymentindex == index">
						<view class="center"></view>
					</view>
				</view>
				<button class="close" @click="close">确定</button>
			</view>
		</uni-popup>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default{
		components:{diyNavBar,loadingCover},
		data(){
			return {
				paymenttype:[],
				paymentindex: 0, //支付方式
				money:'',
				price:''
			}
		},
		onLoad(option){
		},
		onShow(){
			// 支付方式
			this.getpaymenttype()
			//获取余额数据
			this.getData()
		},
		methods:{
			btn(){
				if(!this.price) {
					uni.showToast({title:'请勿输入为空',icon:'none'})
					return false
				}
				this.$http.sendrequest('/record/recordadd',{
					price:this.price,
					type:this.paymenttype[this.paymentindex].id
				},{tokenJudge:true}).then(res=>{
					if(res.code == 1){
						uni.showToast({title:res.msg,icon:'none'})
						this.getData()
					}else{
						uni.showToast({title:res.msg,icon:'none'})
						setTimeout(()=>{
							if(this.paymenttype[this.paymentindex].id == 1){
								this.$util.redirectTo('/pages/wxalipay/wxalipay')
							}else if(this.paymenttype[this.paymentindex].id == 2){
								this.$util.redirectTo('/pages/alipay/alipay')
							}
						},2000)
						
					}
				})
			},
			//获取余额数据
			getData(){
				this.$http.sendrequest('/member/Mywallet',{},{
					tokenJudge:true
				}).then(res=>{
					if(res.code == 1){
						this.money = res.data.money;
						this.price = '';
					}
				})
			},
			paymentSelect(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			},
			getpaymenttype(){
				this.$http.sendrequest('/payment/PaymentList').then(res=>{
					if(res.code == 1) {
						this.paymenttype = res.data;
						this.paymenttype.forEach(item=>{
							switch(item.name){
								case '微信':
									item.icon = 'icon-weixin'
									break;
								case '支付宝':
									item.icon = 'icon-zhifubao'
									break;
							}
						})
						this.$refs.loadingCover.hide();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal{
		min-height: 100vh;
		// background: $uni-content-background-color;
		.topmony{
			background: $uni-tabbar-hovercolor;
			height: 380rpx;
			padding-top: 26rpx;
			color: #FFFFFF;
			font-weight: bold;
			.title{
				margin:0 48rpx 16rpx; 
				font-size: 28rpx;
			}
			.money{
				font-size: 80rpx;
				margin-left: 48rpx;
				text{
					font-size: 40rpx;
				}
			}
		}
		.bottommoney{
			margin: -160rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 44rpx 30rpx 32rpx;
			box-sizing: border-box;
			.title{
				font-size: 28rpx;
				margin-bottom: 36rpx;
			}
			.center{
				border-bottom: 2rpx solid rgba(0,0,0,.04);
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 30rpx;
				.left{
					font-size: 84rpx;
				}
				input{
					font-size: 38rpx;
					margin-left: 24rpx;
				}
				.whole{
					position: absolute;
					right: 30rpx;
					bottom: 26rpx;
					color: $uni-tabbar-hovercolor;
				}
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 24rpx;
				}
				.right{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					.iconfont{
						font-size: 34rpx;
						color: #C6C9CC;
					}
					.icon-jinrujiantou{
						font-size: 42rpx;
					}
					.icon-zhifubao{
						color: #22ABFF;
					}
					.text{
						margin:  0 0rpx 0 24rpx;
					}
				}
			}
		}
		.button{
			width: 630rpx;
			height: 90rpx;
			background: $uni-tabbar-hovercolor;
			line-height: 90rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 90rpx;
			margin-top: 100rpx;
		}
		.payment-box{
			width: 100%;
			min-height: 360rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			padding:40rpx;
			box-sizing: border-box;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 2rpx solid rgba(0,0,0,.04);
				.right{
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 2rpx solid $uni-tabbar-hovercolor;
					display: flex;
					align-items: center;
					justify-content: center;
					.center{
						background:$uni-tabbar-hovercolor ;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
					}
				}
				.item-left{
					font-size: 28rpx;
					display: flex;
					align-items: center;
					.iconfont{
						font-size: 60rpx;
						margin-right: 30rpx;
					}
				}
			}
			.close{
				text-align: center;
				margin-top: 50rpx;
				font-size: 34rpx;
				background: $uni-tabbar-hovercolor;
				color: #FFFFFF;
				border-radius: 90rpx;
				height: 90rpx;
			}
		}
		.icon-zhifubao{
			color: #22ABFF !important;
		}
		.icon-weixin{
			color: #34C758 !important;
		}
	}
</style>
